<template>
    <div class="login-page">
        <div class="login-from">
            <h3>用户登录</h3>
            <a-form :form="form" class="login-form" @submit="handleSubmit">
                <a-form-item>
                    <a-input v-decorator="[ 'name', { rules: [{ required: true, message: '请输入用户名' }] }, ]" placeholder="用户名" >
                        <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input v-decorator="[ 'password', { rules: [{ required: true, message: '请输入密码' }] } ]" type="password" placeholder="密码">
                        <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-item>
                <a-form-item style="margin-bottom: 10px">
                    <a-button type="primary" html-type="submit" class="login-form-button">登录</a-button>
                </a-form-item>
                <div style="height: 50px">
                    <a href="#/regist">前往注册</a>
                    <a class="login-form-forgot">忘记密码</a>
                </div>
            </a-form>
        </div>
    </div>
</template>
<script>
import http from '@/helper/request'
export default {
    data () {
        return {}
    },
    beforeCreate () {
        this.form = this.$form.createForm(this, {
            name: 'normal_login'
        })
    },
    methods: {
        handleSubmit (e) {
            e.preventDefault()
            this.form.validateFields((err, values) => {
                if (!err) {
                    http.post('/user/login', values).then(() => {
                        var { query } = this.$route
                        this.$router.push({ path: '/', query })
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.login-page {
    .login-from {
        background: #fff;
        box-shadow: 0 0 100px rgba(0, 0, 0, .1);
        padding: 40px 30px;
        position: fixed;
        width: 320px;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
    }
    h3 {
        margin-bottom: 10px;
    }
    .login-form-forgot {
        float: right;
    }
    .login-form-button {
        width: 100%;
    }
}
</style>
